<!--
  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
	<Fragment>
		<NcModal
			v-if="showRemoveGroupModal"
			@close="showRemoveGroupModal = false">
			<div class="modal__content">
				<h2 class="modal__header">
					{{ t('settings', 'Please confirm the group removal') }}
				</h2>
				<NcNoteCard
					type="warning"
					show-alert>
					{{ t('settings', 'You are about to delete the group "{group}". The accounts will NOT be deleted.', { group: name }) }}
				</NcNoteCard>
				<div class="modal__button-row">
					<NcButton
						variant="secondary"
						@click="showRemoveGroupModal = false">
						{{ t('settings', 'Cancel') }}
					</NcButton>
					<NcButton
						variant="primary"
						@click="removeGroup">
						{{ t('settings', 'Confirm') }}
					</NcButton>
				</div>
			</div>
		</NcModal>

		<NcAppNavigationItem
			:key="id"
			ref="listItem"
			:exact="true"
			:name="name"
			:to="{ name: 'group', params: { selectedGroup: encodeURIComponent(id) } }"
			:loading="loadingRenameGroup"
			:menu-open="openGroupMenu"
			@update:menuOpen="handleGroupMenuOpen">
			<template #icon>
				<AccountGroup :size="20" />
			</template>
			<template #counter>
				<NcCounterBubble
					v-if="count"
					:type="active ? 'highlighted' : undefined">
					{{ count }}
				</NcCounterBubble>
			</template>
			<template #actions>
				<NcActionInput
					v-if="id !== 'admin' && id !== 'disabled' && (settings.isAdmin || settings.isDelegatedAdmin)"
					ref="displayNameInput"
					:trailing-button-label="t('settings', 'Submit')"
					type="text"
					:model-value="name"
					:label=" t('settings', 'Rename group')"
					@submit="renameGroup(id)">
					<template #icon>
						<Pencil :size="20" />
					</template>
				</NcActionInput>
				<NcActionButton
					v-if="id !== 'admin' && id !== 'disabled' && (settings.isAdmin || settings.isDelegatedAdmin)"
					@click="showRemoveGroupModal = true">
					<template #icon>
						<Delete :size="20" />
					</template>
					{{ t('settings', 'Delete group') }}
				</NcActionButton>
			</template>
		</NcAppNavigationItem>
	</Fragment>
</template>

<script>
import { showError } from '@nextcloud/dialogs'
import { Fragment } from 'vue-frag'
import NcActionButton from '@nextcloud/vue/components/NcActionButton'
import NcActionInput from '@nextcloud/vue/components/NcActionInput'
import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
import NcButton from '@nextcloud/vue/components/NcButton'
import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
import NcModal from '@nextcloud/vue/components/NcModal'
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
import AccountGroup from 'vue-material-design-icons/AccountGroupOutline.vue'
import Pencil from 'vue-material-design-icons/PencilOutline.vue'
import Delete from 'vue-material-design-icons/TrashCanOutline.vue'

export default {
	name: 'GroupListItem',
	components: {
		AccountGroup,
		Delete,
		Fragment,
		NcActionButton,
		NcActionInput,
		NcAppNavigationItem,
		NcButton,
		NcCounterBubble,
		NcModal,
		NcNoteCard,
		Pencil,
	},

	props: {
		/**
		 * If this group is currently selected
		 */
		active: {
			type: Boolean,
			required: true,
		},

		/**
		 * Number of members within this group
		 */
		count: {
			type: Number,
			default: null,
		},

		/**
		 * Identifier of this group
		 */
		id: {
			type: String,
			required: true,
		},

		/**
		 * Name of this group
		 */
		name: {
			type: String,
			required: true,
		},
	},

	data() {
		return {
			loadingRenameGroup: false,
			openGroupMenu: false,
			showRemoveGroupModal: false,
		}
	},

	computed: {
		settings() {
			return this.$store.getters.getServerData
		},
	},

	methods: {
		handleGroupMenuOpen() {
			this.openGroupMenu = true
		},

		async renameGroup(gid) {
			// check if group id is valid
			if (gid.trim() === '') {
				return
			}

			const displayName = this.$refs.displayNameInput.$el.querySelector('input[type="text"]').value

			// check if group name is valid
			if (displayName.trim() === '') {
				return
			}

			try {
				this.openGroupMenu = false
				this.loadingRenameGroup = true
				await this.$store.dispatch('renameGroup', {
					groupid: gid.trim(),
					displayName: displayName.trim(),
				})

				this.loadingRenameGroup = false
			} catch {
				this.openGroupMenu = true
				this.loadingRenameGroup = false
			}
		},

		async removeGroup() {
			try {
				await this.$store.dispatch('removeGroup', this.id)
				this.showRemoveGroupModal = false
			} catch {
				showError(t('settings', 'Failed to delete group "{group}"', { group: this.name }))
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.modal {
	&__header {
		margin: 0;
	}

	&__content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
		gap: 4px 0;
	}

	&__button-row {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}
}
</style>
